<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>dynoScreen Demo</title>

<link href="dynoScreen.css" type="text/css" rel="stylesheet">

</head>
<body>

<div id="wrap">
	<div id="hack" style="margin:auto;width:630px;">
 <div class="holder"><input id="button0" type="button" class="btn" value="&#9668;"></div>
 <div id="area0"></div> 
 <div class="holder"><input id="button1" type="button" class="btn" value="&#9658;"></div>
 	</div>
<div style="clear:both;text-align:center;">
	<p/>
	<br/>
<img src="images/neptune.png" class="category" onmouseup="DS.setKidDivs('show01');"/>
<img src="images/transmit.png" class="category" onmouseup="DS.setKidDivs('show00');"/>
<img src="images/venus.png" class="category" onmouseup="DS.setKidDivs('show01',2);"/>
<img src="images/moon.png" class="category" onmouseup="demoCallBack();"/>
</div>
</div>

<div id="show00" class="dataEntry">
<div class="infoPage" style="background-color:#a0a;">
<p style="text-align:center;"><img src="images/firefox.png"/></p>
The summer soldier and the sunshine patriot will
in this hour of need, shrink from the service
of their country.
</div>

<div class="infoPage" style="background-color:#fc0;color:#fff;">
<p style="text-align:center;"><img src="images/mars.png"/></p>
<br/>
Y, ademas, hay mucho aqui pa' leer ...
quizas sobre Marzo, la planeta, o el mes.
</div>

<div class="infoPage" style="background-color:#606;">
<p style="text-align:center;"><img src="images/pluto.png"/></p>
</div>

</div>

<div id="show01" class="dataEntry">
<div class="infoPage"><i>RAAAT ZERO</i><br><img src="about:logo"/></div>
<div class="infoPage">RAAAAT ONE</div>
<div class="infoPage">RAAAAAT TWO</div>
<div class="infoPage">RAAAT THREE</div>
<div class="infoPage">RAATAAT FOUR</div>
</div>


<script src="dynoScreen.js"></script>

<script>
////////////////////////////////////////////////////////

DS     = document.getElementById('area0');
divVar = document.getElementById('show00');
butt0  = document.getElementById('button0');
butt1  = document.getElementById('button1');

dynoScreen.initDisplayArea(DS,divVar,800);

butt0.onclick = function(){ DS.showNext(-1,'right'); }
butt1.onclick = function(){ DS.showNext( 1,'left' ); }

demoCallBack = function(){
	DS.showNext(1,'left');
	DS.addEvent('onComplete',unsetCallBack);
	//DS.addEvent('onComplete', function(){alert('x');unsetCallBack()});
}
unsetCallBack = function(){
	alert('onComplete called from HTML\nthen removed...');
	DS.removeEvent('onComplete',unsetCallBack);
	//DS.removeEvent('onComplete', function(){alert('x');unsetCallBack()});
}




</script>


</body>
</html>
